<template>
    <div>
        <div class="search">
            <input v-model="keyword" type="text" class="search-input" placeholder="输入城市名或拼音">
        </div>
        <div class="search-content" ref="search" v-show="keyword">
            <ul>
                <li class='search-item border-bottom'   v-for="item of list" :key="item.id" @click="handleCityClick(item.name)">{{item.name}}</li>
                <li class='search-item border-bottom' v-show="!list.length">没有找到你要的城市</li>
            </ul>
        </div>
    </div>
    
</template>
<script>
import BScroll from 'better-scroll'
export default {
    props:{
        cities:Object
    },
    name :'CitySearch',
    data (){
        return {
            keyword:'',
            list:[],
            tirme:null
        }
    },
    watch:{
        keyword (){
            if(this.tirme){
                clearTimeout(this,tirme)
            }
            if(!this.keyword){
                this.list=[]
                return
            }
            this.time=setTimeout(()=>{
                const result=[]
                for (let i in this.cities){
                    this.cities[i].forEach((value) => {
                        if(value.spell.indexOf(this.keyword)>-1 || value.name.indexOf(this.keyword)>-1){
                            result.push(value)
                        }
                    });
                }
                this.list=result
            },100)
        }
    },
    mounted(){
        this.scroll= new BScroll(this.$refs.search)
    },
      methods:{
      handleCityClick(city){
          this.$store.commit('changeCity',city)
          this.$router.push('/')
      }
  }
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.search
    height .72rem
    padding  0 .1rem
    background $bgColor
    .search-input
        box-sizing border-box
        width 100%
        height .62rem
        line-height .62rem
        text-align center
        border-radius: .06rem
        color #666
        padding  0 .1rem
.search-content
    z-index 1
    overflow hidden
    position absolute
    top 1.58rem
    left 0
    right 0
    bottom 0
    background #eeeeee
    .search-item
        line-height .62rem
        padding-left .2rem
        background #ffffff
        color #666
</style>
